<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>作业-腾讯官网模仿（白线以下，公司简介以上）</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: rgba(0, 0, 0, 0.5);
			}

			.content {
				width: 1194px;
				height: 1872px;
				margin: 0 auto;
				background-color: aliceblue;
				padding: 0 15px;
			}

			div[class^="color"] {
				font-size: 55px;
				text-align: center;
				line-height: 200%;
				height: 620px;
			}

			@media(max-width:1225px) {
				.content {
					width: calc(100% - 30px);
				}
			}

			@media(max-width:820px) {
				div[class^="color"] {
					height: 520px;
				}
			}

			@media(max-width:640px) {
				.xs6 {
					width: 100%;
				}
			}

			.color1 {
				background-color: red;
			}

			.color2 {
				background-color: orange;
			}

			.color3 {
				background-color: blue;
			}

			.color4 {
				background-color: green;
			}

			.color5 {
				background-color: purple;
			}

			.color6 {
				background-color: #236567;
			}

			.color7 {
				background-color: #456757;
			}
		</style>
	</head>

	<body>
		<div class="content layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-sm8">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs12">
						<div class="color1">1</div>
					</div>
					<div class="layui-col-xs6 xs6">
						<div class="color3">3</div>
					</div>
					<div class="layui-col-xs6 xs6">
						<div class="color4">4</div>
					</div>
					<div class="layui-col-xs12">
						<div class="color6">6</div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4">
				<div class="lay-row layui-col-space15">
					<div class="layui-col-xs12">
						<div class="color2">2</div>
					</div>
					<div class="layui-col-xs12">
						<div class="color5">5</div>
					</div>
					<div class="layui-col-xs12">
						<div class="color7">7</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>